<template>
  <el-main>
    <div class="Detail_top">
      <div class="flex-x-end">
        <el-button @click="back" size="small" type="primary" icon="el-icon-back"
          >返回</el-button
        >
      </div>

      <div>
        <div class="check_sn">
          {{ tableData.title }}
        </div>
        <div class="time" style="padding: 20px">
          <i class="el-icon-timer"></i><span>{{ tableData.createtime }}</span>
          <i class="el-icon-guide" style="padding-left: 20px"></i>
          <span>{{ tableData.status == 3 ? "活动预约" : "参观预约" }}</span>
        </div>
        <div class="flex-x-center">
          <img
            :src="common.getUrl(getImg(tableData.imgs))"
            min-width="400"
            height="300"
          />
        </div>
        <div class="flex-x-center" style="padding: 20px 100px">
          {{ tableData.content }}
        </div>
      </div>
    </div>
    <!-- 客户 -->
    <!-- <div class="Detail_bottom">
      <div v-for="(item, index) in tableData.customer_data_arr" :key="index" class="customer">
        <div class="cus_title">客户名称：{{ item.customer_name }}</div>
        <div style="padding-top:10px">{{ item.customer_addr }}</div>
      </div>
    </div> -->
  </el-main>
</template>
<script>
import { mapState } from "vuex";
import { getReservation } from "../../api.js";
import common from "../../assets/common.js";
export default {
  name: "mangeWayDetail",
  data() {
    return {
      tableData: {},
      activeName: "first",
      Id: "",
      transport_sn: "",
      state: 0,
    };
  },
  async mounted() {
    this.Id = this.$route.query.id;
    this.state = this.$route.query.state;
    console.log("this.type", this.type);
    this.getTableDate();
  },
  methods: {
    //获取信息
    getTableDate() {
      var _this = this;
      getReservation({
        id: this.Id,
      }).then((res) => {
        if (res.code == 200) {
          _this.tableData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    back() {
      this.$router.back();
    },
    formatDept(cellValue) {
      return Array.prototype.join.call(cellValue, "，");
    },
    getImg(coverImg) {
      return coverImg.split(",") ? coverImg.split(",")[0] : coverImg;
    },
  },
  computed: {
    ...mapState({
      access_token: (state) => state.access_token,
      baseUrl: (state) => state.baseUrl,
    }),
  },
};
</script>
<style scoped>
.flex-x-end {
  display: flex;
  justify-content: flex-end;
}

.flex-x-center {
  display: flex;
  justify-content: center;
}

.el-rate__icon {
  font-size: 30px !important;
}

.el-row {
  margin-top: 25px;
}

.el-row.transport_box {
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.el-tag--primary {
  background-color: #ad0c25;
  border-color: #ad0c25;
  color: #fff;
}

.check_sn {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  padding-top: 20px;
}

.el-steps.el-steps--horizontal {
  width: calc(100% - 100px);
  margin-left: 50px;
}

main >>> .el-card .el-step__head {
  width: 100%;
}

main >>> .detaile-box .el-step__head {
  height: 100%;
}

.detaile-box {
  min-height: 500px;
}

main >>> .el-step__icon {
  line-height: 18px;
}

main >>> .el-row.transport_title {
  /* border-bottom: 1px solid #e4e7ed; */
  padding-bottom: 10px;
  width: 100%;
}

.Detail_top {
  background-color: rgb(246, 239, 238);
  padding: 20px;
}

.Detail_bottom {
  padding: 20px;
}

.el-tag.el-tag--info {
  font-size: 16px;
  margin-right: 10px;
}

.customer {
  padding: 30px 0;
  font-size: 18px;
  font-weight: 500;
}

.cus_title {
  color: rgb(173, 12, 37);
}

.time {
  font-size: 14px;
  color: #999;
  text-align: center;
}
</style>
